<template>
  <Dialog :appDialog="appDialog">
    <div class="upload">
      <div class="left">
        共导入<span>{{ proplist.success_total+ proplist.fail_total}}</span
        >条数据，成功<span>{{ proplist.success_total }}</span
        >条，失败<span>{{ proplist.fail_total }}</span> 条</div
      >
    </div>

    <el-form :inline="true" :model="formInline" class="form-inline">
      <div style="display: flex">
        <div class="form-item-wrap">
          <el-form-item label="选择状态">
            <el-select v-model="formInline.import_status" :label="label">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="成功" value="1"></el-option>
              <el-option label="失败" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="btn-wrap">
          <el-form-item>
            <el-button type="primary" @click="query">查找</el-button>
            <el-button @click="onClear">清空</el-button>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-button @click="downloadDome">导出</el-button>
      </div>
    </el-form>
    <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%" :header-cell-style="{ background: '#F9F9F9' }">
      <el-table-column prop="words_name" label="编码" width="60" align="center">
        <template #default="scope">
          <div>{{ scope.$index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="store_name" label="名称" width="130" align="center"> </el-table-column>

      <el-table-column prop="store_address" label="地址" width="140"> </el-table-column>
      <el-table-column prop="creater_name" label="经纬度" width="160">
        <template #default="scope">
          <div>经度{{ scope.row.lon }},<br />纬度{{ scope.row.lat }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="import_status" label="状态" width="120">
        <template #default="scope">
          <div v-if="scope.row.import_status == 1" style="color: #60b900">成功</div>
          <div v-if="scope.row.import_status == 2" style="color: #969696">失败</div>
        </template>
      </el-table-column>
      <el-table-column prop="fail_reason" label="原因" width="160"> </el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ '暂无数据' }}</div>
      </template>
    </el-table>
    <ZWPagination ref="paginationRef" @submit="getPagination" />
  </Dialog>
</template>

<script lang="ts" setup>
import Dialog from '@/components/Dialog.vue'
import ZWUpload from '@/components/ZWUpload.vue'
import ZWPagination from '@/components/ZWPagination.vue'
import { getdownimportrecord, getimportrecordexport } from '@/api/employe/storemanagement/sensitiveWord'
import { ElMessage } from 'element-plus'
import { ref, reactive, watch, computed } from 'vue'
import type { ElForm } from 'element-plus'
import { getSetionId } from '@/utils/utils'
import { useStore } from '@/store'

const emit = defineEmits(['save', 'cancel'])
const pro = defineProps(['selectid'])
type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
const store = useStore()
const tabs = ref([])
const proplist = ref({})
const DepartRef = ref({})
const picInfo = ref({
  type: 5,
  label: '文件',
  prop: 'files',
  multiple: false,
  limitSize: 20,
  limitNum: 1,
  acceptFile: '.xls,.xlsx',
  files: []
})
const page = reactive({
  page: 1,
  page_size: 15
})
const tableData = ref([])
let formData = ref({})
let yuangongList = ref([])
const formInline = reactive({
  import_status: '-1'
})
// 初始化formData
const initFormData = () => {
  ruleFormRef.value?.resetFields()
  formData.value = {
    fileData: {},
    cust_tag_ids: [], //标签id
    work_user_ids: [] //当前选择的员工id
  }
}

// 关闭弹框
const cancelHandel = () => {
  appDialog.value.visible = false
  emit('cancel')
}

let appDialog = ref({
  visible: false,
  title: '导入记录',
  width: '800px',
  cancel: cancelHandel,
  cancelText: '关闭'
})
//获取表格列表
const getSensitive = (data?: any) => {
  // var search = JSON.parse(JSON.stringify(searchData))
  // search.status = search.status == '全部' ? 0 : search.status == '开启' ? 1 : 2
  let parm = {
    import_status: formInline.import_status,
    page: data.page,
    page_size: data.page_size,
    group_id: pro.selectid
  }
  getdownimportrecord(parm).then((res: any) => {
    console.log(res.data, 'datataafa')
    store.dispatch('pageTotal', res.total)
    tableData.value = res.data
    proplist.value = res
  })
}
const initpage = () => {
  getSensitive(page)
}
const getPagination = (data: any) => {
  page.page = data.page
  page.page_size = data.page_size
  initpage()
}
//搜索
const query = () => {
  initpage()
}
const onClear = () => {
  formInline.import_status = '-1'
  initpage()
}
// 下载dome
const downloadDome = () => {
  let parm = {
    import_status: formInline.import_status,
    group_id: pro.selectid
  }
  getimportrecordexport(parm)
    .then((r: any) => {
      var a = document.createElement('a')
      // 获取文件名fileName
      a.href = r.url
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    })
    .catch((e: any) => {
      console.log(e)
    })
}

watch(
  () => appDialog.value.visible,
  (val) => {
    if (val) {
      initFormData()
      yuangongList.value = []
      tabs.value = []
    }
  }
)

defineExpose({
  appDialog,
  initpage
})
// defineExpose({ onChangeTab, activeName }) //像父组件抛出方法
</script>

<style lang="scss" scoped>
.upload {
  margin: 20px 0px;
  font-size: 16px;
  color: #ff6b00;
}
.form-inline {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.formData {
  max-height: 50vh;
  overflow-y: scroll;
  padding: 12px 30px 50px 0;

  .upload {
    .left {
      display: flex;
      margin-left: 10px;

      margin-bottom: 20px;
    }
  }
  .upload-content {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    height: 36px;
    border: 1px solid #eaeaea;
    margin-bottom: 6px;
    .upload {
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
      opacity: 0;
    }
    .upload-box {
      position: relative;
      width: 180px;
      height: 36px;
      border-radius: 4px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #969696;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-left: 9px;
      }
    }
    .upload-file-box {
      display: flex;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid #eaeaea;
      width: 180px;
      height: 36px;
      line-height: 36px;
      .left {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #33302d;
        padding-left: 10px;
        span {
          vertical-align: middle;
        }
        img {
          margin-top: 8px;
          width: 20px;
          height: 20px;
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      .right {
        cursor: pointer;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        margin-top: 12px;
      }
    }
  }

  .download {
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #ff6b00;
    margin-left: 10px;
    cursor: pointer;
  }
  .upload-desc {
    margin-top: 6px;
    background: #f9f9f9;
    border-radius: 1px;
    font-size: 12px;
    font-family: STHeitiSC-Light, STHeitiSC;
    color: #696969;
    padding: 4px 8px;
    line-height: 16px;
  }
  .tabs-box {
    margin-bottom: 7px;
    div {
      display: inline-block;
      background: #fffaf9;
      border-radius: 2px;
      border: 1px solid #ffc69e;
      justify-content: center;
      align-items: center;
      padding: 0 4px;
      line-height: 22px;
      height: 22px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #ff6b00;
      margin-right: 10px;
      margin-bottom: 7px;
      .del-icon {
        margin-left: 8px;
        vertical-align: middle;
        cursor: pointer;
      }
    }
  }
  .yuangong-list {
    div {
      display: inline-block;
      vertical-align: middle;
      background: #fffaf9;
      border-radius: 1px;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 4px 8px;
      line-height: 22px;
      box-sizing: border-box;
      img {
        width: 10px;
        height: 12px;
      }
      .del_icon {
        width: 12px;
        height: 12px;
        cursor: pointer;
      }
      span {
        margin: 0 10px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #35383a;
      }
    }
  }
}
.formData::-webkit-scrollbar {
  display: none;
}
</style>

<style>
.upload-content .el-upload {
  display: block !important;
}

.upload-content .el-form-item__content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>
